<template>
	<div class="growth">

		<div class="growthDiv">
			<div class="ones" style="border-right:0;">
				当前获得的成长值
				<p>{{memberDetails.growth}}</p>
			</div>
		</div>

		<div class="growth-textContent">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getData"
      >
        <div v-if="typeof lis=='string'" class="listDatasno" >{{lis}}</div>
        <div v-else v-for="(v,idx) in lis" :key="idx"  class="listDatas"  >
          <van-row>
            <van-col v-if="v.remark.length==0" span="16" style="padding:3px 10px;text-align: left;color:#ddd">
              暂无备注信息
            </van-col>
            <van-col v-else span="16" style="padding:3px 10px;text-align: left;">
              备注:{{v.remark}}
            </van-col>
            <van-col span="8" style="padding:3px 10px;text-align: right">
              <span v-if="v.expvals>0" class="b-lists-money">{{v.expvals}}</span>
              <span v-else class="b-lists-money2">{{v.expvals}}</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24" class="b-lists-time">{{v.created_at}}</van-col>
          </van-row>
        </div>
        <div class="noDatas" :style="{display:block}">
          数据已加载完
        </div>
      </van-list>


		</div>


    <!--返回按钮-->
    <van-button class="growth-back" @click="onClickLeft">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </van-button>


	</div>
</template>
<script type="text/javascript">
	import { mapState } from 'vuex';

	export default {
		name:"growth",
		data(){
			return {
				currentPage:1,
        block: 'none',
				lis:[],
				pagesize:10,
      	page:0,
      	Totals:0,
        loading: false,
        finished: false
			}
		},
		computed: {
		    ...mapState({
		    	memberDetails:"data"
		    })
		},
		methods:{
			getData(){
				var $this=this;
		    	this.$http.member.get('/expRecord/oneVipExpWx',{
		    		params:{
		    			vip_id:$this.$store.state.data.memberID,
              page:$this.currentPage,
              pageSize:$this.pagesize
		    		}
		    	})
	            .then(function (response) {

	     		   // console.log(response.data.data);
	     		   $this.currentPage=response.data.data.current_page+1;//获取当前的下一页
	     		   var objs=response.data.data.data;
	               for(var i=0;i<objs.length;i++){
	               		if(objs[i].expval>0){
	               			objs[i].expvals="+"+objs[i].expval;
	               		}else if(objs[i].expval<0){
	               			objs[i].expvals=objs[i].expval;
	               		}
                   $this.lis.push(objs[i]);
	               }
	               // $this.lis=objs;

                $this.loading = false;
                if(!objs.length){
                  $this.lis="暂无记录";
                  $this.finished = true;
                } else if ($this.lis.length >= response.data.data.total) {
                  $this.finished = true;
                  $this.block = 'block'
                }


	            })
	            .catch(function (error) {
	                console.log(error);
	            });

			},
			onClickLeft() {

        this.$router.push({name: 'memberDetails',params:{
            url:this.$store.state.data.path,
            vipId:this.$store.state.data.memberID
          }});
        // this.$router.go(-1);
		    }
		},
		mounted(){
			// this.getData();
		}
	}
</script>
<style type="text/css">
	.growthDiv{
		display: flex;
		padding:10px 0;
		background-color: #0D90EB;
    font-size:12px;
    color:#666;
    position: fixed;
    top:0;
    left:0;
    width:100%;

	}
  .growth-textContent{
    margin-top:82px;
  }
	.growthDiv>.ones{
		width:100%;
		color:#fff;
    font-size: 16px;
    margin:5px 0;
    font-weight: bold;
	}


	.growth-back{
    position: fixed!important;
    bottom:100px!important;
    right:10px!important;
    background:rgba(0,0,0,.5)!important;
    width:55px!important;
    height:auto!important;
    color:#fff!important;
    font-size:12px!important;
    padding:12px 0!important;
    border-radius: 5px!important;
    line-height: initial!important;
    border:0!important;
  }
  .growth-back .iconfont{
    font-size:12px;
  }
  .b-lists{
    font-size:12px;color:#666
  }
  .b-lists-money{
    color:#01A761;font-size:16px;font-weight: bold
  }
  .b-lists-money2{
    color:red;font-size:16px;font-weight: bold
  }
  .b-lists-time{
    padding:3px 10px;text-align: left;font-size:12px;
  }
  .listDatas{
    padding:5px 0;font-size:16px;border-bottom:1px solid #ddd;background: #fff;
  }
  .listDatasno{
    color:#ddd;font-size:14px;padding:10px 0;
  }
</style>
